<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Smiles Drawer Example</title>
        <meta name="description" content="A minimal smiles drawer example.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            canvas { margin: 5px; }
        </style>
    </head>
    <body>
        <script src="../dist/smiles-drawer.min.js"></script>
        <script src="force.js"></script>
        <script>
            let options = { width: 5000, height: 5000, bondLength: 15, overlapResolutionIterations: 4 };
            
            // Initialize the drawer
            let smilesDrawer = new SmilesDrawer.Drawer(options);
            
            for (let i = 0; i < 2; i++) {
                try {
                    let canvas = document.createElement('canvas');
                    canvas.setAttribute('id', 'canvas' + i);
                    canvas.setAttribute('width', '100');
                    canvas.setAttribute('height', '100');
                    canvas.setAttribute('alt', force[i]);
                    document.body.appendChild(canvas);
                    
                    let t = performance.now();
                    SmilesDrawer.parse(force[i], function(tree) {
                        smilesDrawer.draw(tree, 'canvas' + i, 'light', false);
                        let td = performance.now() -t;
                        let div = document.createElement('div');
                        div.innerHTML = td;
                        document.body.appendChild(div);
                    });

                    // if (td > 1000) console.log(schembl[i]);
                } catch (exception) {

                }
            }
        </script>
    </body>
</html>
